<template>
	<!-- Main content -->
	<section class='content'>
		<div class="box box-default">
			<div class="box-header with-border form-horizontal">
				<div class="row">
					<div class="col-md-3">
						<div class="form-group">
							<label class="col-md-4 control-label">借款人姓名</label>
							<div class="col-md-8">
								<input class="form-control" placeholder="姓名">
							</div>
						</div>
					</div>
					<div class="col-md-3">
						<div class="form-group">
							<label class="col-md-4 control-label">证件号码</label>
							<div class="col-md-8">
								<input class="form-control" placeholder="输入证件号码">
							</div>
						</div>
					</div>
					<div class="col-md-6">
						<div class="form-group">
							<label class="col-md-2 control-label">签订日期</label>
							<div class="col-md-10 form-inline">
								<div class="time_field">
									<span class="date"><input class="form-control"></span>
									<span class="break">至</span>
									<span class="date"><input class="form-control"></span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="text-right">
					<button class="btn btn-default search_btn">搜索</button>
				</div>
			</div>

			<div class="box-body">
				<table class="table table-hover">
					<thead>
						<tr>
							<th>合同编号</th>
							<th>贷款类别</th>
							<th>借款人类别</th>
							<th>借款人名称</th>
							<th>借款人证件类型</th>
							<th>借款人证件号码</th>
							<th>合同金额</th>
							<th>月利率（‰）</th>
							<th>合同签订日期</th>
							<th>上报</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="loan in loans">
							<td>{{loan['contractCode']}}</td>
							<td>{{loan['borrowerType']}}</td>
							<td>{{loan['borrowerPersonType']}}</td>
							<td>{{loan['borrowerName']}}</td>
							<td>{{loan['borrowerNoType']}}</td>
							<td>{{loan['borrowerNo']}}</td>
							<td>{{loan['contractAmount']}}</td>
							<td>{{loan['monthlyInterestRate']}}</td>
							<td>{{loan['contractDate']}}</td>
							<td><a @click="report(loan)">补上报</a></td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="box-footer">
			</div>
		</div>
	</section>
	<!-- /.content -->
</template>

<script type="text/ecmascript-6">
	export default{
		data(){
			return {
				layer:{
					add:'',
				},
				loans:[],

			}
		},
		methods:{
			fetchLoans(){
				this.$store.dispatch('fetchLoans',{
				}).then((loans)=>{
					this.loans=loans.filter(function(loan){
						return loan['uploadStatus'].match("no_upload");
					})
				})
			},
			report(loan){
				this.$store.dispatch('uploadLoans',{
					id:loan['id']
				}).then((info)=>{
					this.fetchLoans()
				})
			}
		},
		mounted(){
			this.fetchLoans();
			this.$nextTick(function () {
			})
		},
		beforeDestroy(){
			//用户使用输入路由跳页的时候
			layer.close(this.layer.add);
		}
	}
</script>
<style>
	.info-box {
		cursor: pointer;
	}

	.info-box-content {
		text-align: center;
		vertical-align: middle;
		display: inherit;
	}

	.fullCanvas {
		width: 100%;
	}
</style>
